<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.4.min.js">
			
		</script>
	</head>
	<body>
		<button id="but1"> 点击淡入 div 元素。</button>
		
		<button id="but2"> 点击淡出 div 元素。</button>
		
		<button id="but3"> 点击淡入+淡出div 元素。</button>
		
		<div id="div1" style="width: 80px;height: 80px;display: none;background:red;"></div><br>
		<div id="div2" style="width: 80px;height: 80px;display: none;background:green;"></div><br>
		<div id="div3" style="width: 80px;height: 80px;display: none;background:blue;"></div>
		
		
		<script>
			$('#but1').click(function (){
				$("#div1").fadeIn();
				$("#div2").fadeIn("slow");
				$("#div3").fadeIn(5000);
			});
			
			$('#but2').click(function (){
				$("#div1").fadeOut();
				$("#div2").fadeOut("slow");
				$("#div3").fadeOut(2000);
			});
			$('#but3').click(function (){
				$("#div1").fadeToggle();
				$("#div2").fadeToggle("slow");
				$("#div3").fadeToggle(1000);
			});
			
			
			
		</script>
		
	</body>
</html>
